<?php
 /**
 * Style Guide
 * 
 * This topic is used to show you reference to the style guide
 * You should view the topic in the browser at /tools/style_guide
 * When you hover over an element it will show you the tag it uses so you dont have to look in the code
 * 
 * @editing     This page should never be edited. Also, it is meant for refence when creating docs, but not to be included in your user guide
 * @url     /tools/style_guide
 */
?>

<?php $this->themes->js("jQuery(function($) { $('*','#content').set_titles() })", TRUE) ?>

<p class="note"><strong>Note:</strong> Hover over an element to view its tag and class name. This one is a &lt;p class="note"&gt;&lt;/p&gt;.</p>

<h1>Foo Class</h1>

<p>Brief description of Foo Class.  If it extends a native CodeIgniter class, please link to the class in the CodeIgniter documents here.</p>

<p class="important"><strong>Important:</strong>&nbsp; This is an important note with <kbd>EMPHASIS</kbd>.</p>
	
<p>Features:</p>

<ul>
	<li>Foo</li>
	<li>Bar</li>
</ul>

<h2>Usage Heading</h2>

<p>Within a text string, <var>highlight variables</var> using <var>&lt;var&gt;&lt;/var&gt;</var> tags, and <dfn>highlight code</dfn> using the <dfn>&lt;dfn&gt;&lt;/dfn&gt;</dfn> tags.</p>

<h3>Sub-heading</h3>

<p>Put code examples within <dfn>&lt;code&gt;&lt;/code&gt;</dfn> tags:</p>

<code>
$this->load->library('foo');<br/>
<br/>	
$this->foo->bar('bat');
</code>


<h2>Table Preferences</h2>

<p>Use tables where appropriate for long lists of preferences.</p>


<table class="table">
	<thead>
		<tr>
			<th>Preference</th>
			<th>Default&nbsp;Value</th>
			<th>Options</th>
			<th>Description</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><strong>foo</strong></td>
			<td>Foo</td>
			<td>None</td>
			<td>Description of foo.</td>
		</tr>
		<tr>
			<td><strong>bar</strong></td>
			<td>Bar</td>
			<td>bat, bag, or bak</td>
			<td>Description of bar.</td>
		</tr>
	</tbody>
</table>

<h2>Foo Function Reference</h2>

<h3>$this->foo->bar()</h3>
<p>Description</p>
<code>$this->foo->bar('<var>baz</var>')</code>